<!--
 * @Author: zouyaoji@https://github.com/zouyaoji
 * @Date: 2021-07-05 11:03:29
 * @LastEditTime: 2022-02-13 00:15:24
 * @LastEditors: zouyaoji
 * @Description:
 * @FilePath: \vue-cesium-starter\src\views\Home.vue
-->
<template>
  <div style="position:relative;height: 100%; width: 100%;">
    <div style="position:absolute;top:0px;z-index: 2;">
      <vc-btn color="red" rounded @click="show">{{ tilesetTitle }}</vc-btn>
      <vc-btn color="red" rounded @click="createCrane">{{ craneTitle }}</vc-btn>
    </div>
    <div style="position:absolute;top:0px;left:0px;height: 100%; width: 100%;z-index: 1;">
      <vc-viewer @ready="onViewerReady">
        <vc-layer-imagery>
          <vc-imagery-provider-amap :maximumLevel="16" />
        </vc-layer-imagery>
        <vc-primitive-tileset ref="chengdeTileset" url="chengde/tileset.json" @ready="onTilesetReady">
        </vc-primitive-tileset>

        <vc-primitive-model ref="cranePrimitive" :url="crane.url" id="cranePrimitive" @ready-event="onCraneReady"
          :modelMatrix="crane.modelMatrix" @click="onCraneClicked">
        </vc-primitive-model>

        <vc-entity description="Hello VueCesium">
          <vc-graphics-wall ref="wall2" :positions="[
            117.69324276291427,
            42.00132842505088,
            0,
            117.6933051408762,
            42.00134103710246,
            0,
            117.6932730014169,
            42.00142570767281,
            0,
            117.69321016177932,
            42.001414878787855,
            0,
            117.69324276291427,
            42.00132842505088,
            0,
          ]" :maximumHeights="[8,8,8,8,8]" :minimumHeights="[6, 6, 6, 6, 6]" :material="{
            fabric: {
              type: 'VcLineFlow',
              uniforms: { image: './fence.png', axisY: true, color: '#bdf700', repeat: { x: 5, y: 1 }, speed: 5 }
            }
          }"></vc-graphics-wall>

        </vc-entity>
        <vc-entity>
          <vc-graphics-wall ref="wall3" :positions="[
            117.69337405753559,
            42.00150018414537,
            0,
            117.69341622821281,
            42.001508812035496,
            0,
            117.69339350226252,
            42.00157127503473,
            0,
            117.69335034923465,
            42.00156035130282,
            0,
            117.69337405753559,
            42.00150018414537,
            0
          ]" :maximumHeights="[10,10,10,10,10]" :minimumHeights="[8,8,8,8,8]" :material="{
            fabric: {
              type: 'VcLineFlow',
              uniforms: { image: './fence.png', axisY: true, color: '#bdf700', repeat: { x: 5, y: 1 }, speed: 5 }
            }
          }"></vc-graphics-wall>
        </vc-entity>

        <vc-drawings ref="drawingsCustomRef" position="bottom-left" :main-fab-opts="mainFabOpts" :offset="[10, 30]"
          :editable="editable" :clamp-to-ground="clampToGround" :polyline-drawing-opts="polylineDrawingOpts"
          :pin-drawing-opts="pinDrawingOpts" :rectangle-drawing-opts="rectangleDrawingOpts" @draw-evt="drawEvt"
          @active-evt="activeEvt" @editor-evt="editorEvt" @mouse-evt="mouseEvt" @clear-evt="clearEvt">
          <template #body="drawingActionInstances">
            <div class="custom-drawings">
              <el-row>
                <vc-btn v-for="(drawingActionInstance, index) in drawingActionInstances" :key="index"
                  :color="drawingActionInstance.isActive ? 'positive' : 'primary'" rounded
                  @click="toggle(drawingActionInstance)">{{ drawingActionInstance.tip.replace('绘制', '') }}</vc-btn>
                <vc-btn color="red" rounded @click="clear">清除</vc-btn>
              </el-row>
            </div>
          </template>
        </vc-drawings>
      </vc-viewer>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cesiumViewer: {},
      addTerrain: false,
      editable: true,
      clampToGround: false,
      mainFabOpts: {
        direction: 'right'
      },
      tilesetTitle: '移除厂区',
      isTilesetShow: true,
      craneTitle: '移除吊车',
      crane: {
        url: './crane.glb',
        modelMatrix: {},
        animationLine: [
          [117.69349952224216, 42.00100886880374, 7.8001724719690895],
          [117.69324954418406, 42.00172980972441, 7.828811026973412]
        ]
      },
      player: {
        a: '1'
      }
    }
  },
  methods: {
    drawingsReadyDefault ({ viewer, cesiumObject }) {
      console.log('绘制选项参数：', cesiumObject)

      window.vm = this
      window.viewer = viewer
    },
    polylineDrawingOpts: {
      // loop: true,
      onClick (e) {
        console.log(e)
      }
    },
    clear () {
      this.$refs.drawingsCustomRef.clearAll()
    },
    toggle (drawingActionInstance) {
      this.$refs.drawingsCustomRef.toggleAction(drawingActionInstance.name)
    },
    drawEvt (e, viewer) {
      if (e.finished) {
        if (e.type === 'move') {
          viewer.canvas.setAttribute('style', `cursor: ${this.restoreCursorMove}`)
        }
        this.drawing = false
        console.log(e)
      } else {
        this.drawing = true
        if (e.type === 'move') {
          viewer.canvas.setAttribute('style', 'cursor: move')
        }
        if (e.type === 'new') {
          viewer.canvas.setAttribute('style', 'cursor: crosshair')
        }
      }
    },
    activeEvt (e, viewer) {
      viewer.canvas.setAttribute('style', `cursor: ${e.isActive ? 'crosshair' : 'auto'}`)
      if (!e.isActive) {
        this.drawing = false
        this.restoreCursorMove = 'auto'
      }
    },
    editorEvt (e, viewer) {
      if (e.type === 'move') {
        viewer.canvas.setAttribute('style', 'cursor: move')
        this.drawing = true
      } else {
        viewer.canvas.setAttribute('style', 'cursor: auto')
      }
    },
    mouseEvt (e, viewer) {
      const restoreCursor = getComputedStyle(viewer.canvas).cursor
      if (!this.drawing) {
        console.log(e)
        if (e.type === 'onmouseover') {
          this.restoreCursorMove = restoreCursor
          viewer.canvas.setAttribute('style', 'cursor: pointer')
        } else {
          viewer.canvas.setAttribute('style', `cursor: ${this.restoreCursorMove || 'auto'}`)
        }
      }
    },
    clearEvt (e, viewer) {
      console.log(e)
    },
    pickEvt (e) {
      console.log(e)
    },
    onCraneReady ({ viewer }) {
      const cartographic = Cesium.Cartesian3.fromDegrees(117.6935, 42.00097421630107, 9)// 00141575225865
      this.crane.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cartographic)
      this.cesiumViewer = viewer
    },
    /**
     * 厂区加载完成事件
     * @param param0
     */
    onTilesetReady ({ cesiumObject: tileset, viewer }) {
      const cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center)
      const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height)
      const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 21)
      const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3())
      tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation)
      viewer.zoomTo(tileset)
      viewer.scene.globe.depthTestAgainstTerrain = true
      this.restoreCursorMove = 'auto'
      this.drawing = false
    },
    show () {
      this.isTilesetShow = !this.isTilesetShow
      this.tilesetTitle = this.isTilesetShow ? '移除厂区' : '加载厂区'
      if (!this.isTilesetShow) { this.$refs.chengdeTileset.unload() } else { this.$refs.chengdeTileset.load() }
    }
  }
}
</script>
<style>
html,
#app,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.viewer {
  height: 100%;
}
</style>
